// 禁止用户选中 鼠标变为手形
%unable-select {
  user-select: none;
  cursor     : pointer;
}

// 填满父元素
// 组要父元素 position: relative | absolute;
%full {
  position: absolute;
  top     : 0px;
  right   : 0px;
  bottom  : 0px;
  left    : 0px;
}

// flex 垂直水平居中
%flex-center-row {
  display        : flex;
  justify-content: center;
  align-items    : center;
  flex-direction : row;
}

%flex-center-col {
  display        : flex;
  justify-content: center;
  align-items    : center;
  flex-direction : column;
}

.page-login {

  height: 100% !important;
  width : 100%;
  @extend %unable-select;
  $backgroundColor: #f0f2f5;
  // ---
  background-color: $backgroundColor;

  // 层
  .page-login--layer {
    overflow: auto;
  }

  .page-login--layer-area {
    overflow: hidden;
  }

  // 时间
  .page-login--layer-time {
    pointer-events: none;
    font-size     : 400px;
    font-weight   : bold;
    color         : rgba(0, 0, 0, 0.03);
    overflow      : hidden;
    height        : 100%;
    width         : 100%;
    line-height   : 100vh;
  }

  // 登陆页面控件的容器
  .page-login--content {
    @extend %full;
    display        : flex;
    justify-content: center;
    align-items    : center;
    // min-height: 500px;
  }

  // header
  .page-login--content-header {
    padding: 1em 0;

    .page-login--content-header-motto {
      margin    : 0px;
      padding   : 0px;
      color     : $color-text-normal;
      text-align: center;
      font-size : 12px;
    }
  }

  // 登录表单
  .page-login--form {
    width     : 280px;
    margin    : 0 auto;
    background: rgba(255, 255, 255, 0.3);
    padding   : 20px;

    // 卡片
    .el-card {
      margin-bottom: 15px;
    }

    // 登录按钮
    .button-login {
      width: 100%;
    }

    // 输入框左边的图表区域缩窄
    .el-input-group__prepend {
      padding: 0px 14px;
    }

    .login-code {
      height                    : 40px - 2px;
      display                   : block;
      margin                    : 0px -20px;
      border-top-right-radius   : 2px;
      border-bottom-right-radius: 2px;
    }

    // 登陆选项
    .page-login--options {
      margin       : 0px;
      padding      : 0px;
      font-size    : 14px;
      color        : $color-primary;
      margin-bottom: 15px;
      font-weight  : bold;
    }

    .page-login--quick {
      width: 100%;
    }
  }


  // 背景
  .circles {
    pointer-events: none;
    position      : absolute;
    top           : 0;
    left          : 0;
    width         : 100%;
    height        : 100%;
    overflow      : hidden;
    margin        : 0px;
    padding       : 0px;

    li {
      position  : absolute;
      display   : block;
      list-style: none;
      width     : 20px;
      height    : 20px;
      background: #fff;
      animation : animate 25s linear infinite;
      bottom    : -200px;

      @keyframes animate {
        0% {
          transform    : translateY(0) rotate(0deg);
          opacity      : 1;
          border-radius: 0;
        }

        100% {
          transform    : translateY(-1000px) rotate(720deg);
          opacity      : 0;
          border-radius: 50%;
        }
      }

      &:nth-child(1) {
        left           : 15%;
        width          : 80px;
        height         : 80px;
        animation-delay: 0s;
      }

      &:nth-child(2) {
        left              : 5%;
        width             : 20px;
        height            : 20px;
        animation-delay   : 2s;
        animation-duration: 12s;
      }

      &:nth-child(3) {
        left           : 70%;
        width          : 20px;
        height         : 20px;
        animation-delay: 4s;
      }

      &:nth-child(4) {
        left              : 40%;
        width             : 60px;
        height            : 60px;
        animation-delay   : 0s;
        animation-duration: 18s;
      }

      &:nth-child(5) {
        left           : 65%;
        width          : 20px;
        height         : 20px;
        animation-delay: 0s;
      }

      &:nth-child(6) {
        left           : 75%;
        width          : 150px;
        height         : 150px;
        animation-delay: 3s;
      }

      &:nth-child(7) {
        left           : 35%;
        width          : 200px;
        height         : 200px;
        animation-delay: 7s;
      }

      &:nth-child(8) {
        left              : 50%;
        width             : 25px;
        height            : 25px;
        animation-delay   : 15s;
        animation-duration: 45s;
      }

      &:nth-child(9) {
        left              : 20%;
        width             : 15px;
        height            : 15px;
        animation-delay   : 2s;
        animation-duration: 35s;
      }

      &:nth-child(10) {
        left              : 85%;
        width             : 150px;
        height            : 150px;
        animation-delay   : 0s;
        animation-duration: 11s;
      }
    }
  }
}